<template>
	<a-drawer :title="formData.id ? '编辑' : '新增'" :width="600" :visible="visible" :destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }" @close="onClose">
		<a-form ref="formRef" :model="formData">
			<a-row :gutter="16">
				<a-col :span="24">
					<a-form-item label="人员" name="userId" :rules="required('请选择人员')">
						<a-select v-model:value="formData.userId" style="width: 100%" :options="personList"
							:filter-option="filterOptionPersion" placeholder="请选择人员" show-search
							:field-names="{ label: 'name', value: 'id', options: 'personList' }" allowClear
							@change="getAppList">
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row>
				<a-col :span="24">
					<a-form-item label="应用" name="appId" :rules="required('请选择应用')">
						<a-select v-model:value="formData.appId" multiple style="width: 100%" mode="multiple"
							:options="appList" placeholder="请选择省分" :filter-option="filterOption"
							:field-names="{ label: 'appName', value: 'appId', options: 'appList' }" allowClear>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<!-- <a-button style="margin-right: 8px" @click="onSubmit('0')" :loading="submitLoading">保存</a-button> -->
			<a-button type="primary" @click="onSubmit('1')" :loading="submitLoading">提交</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="loginNoticeForm">
import { cloneDeep } from 'lodash-es'
import tool from '@/utils/tool'
import { required } from '@/utils/formRules'
import sysAppruleApi from '@/api/biz/sysAppruleApi'
import appInfoApi from '@/api/biz/appInfoApi'
// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const formRef = ref()
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
// 获取省分字典
let appList = ref()
// let personList = ref()
// onMounted(async () => {
// 	personList.value = await appInfoApi.getUsern()
// })
const props = defineProps({
	personList: {
		type: Array
	},
})
const getAppList = async (userId) => {
	appList.value = await appInfoApi.queryAppInfoList({ userId })
}

// 打开抽屉
const onOpen = (record) => {
	visible.value = true
	if (record) {
		let recordData = cloneDeep(record)
		// recordData.appId = recordData.appId.split(',')
		formData.value = Object.assign({}, recordData)
	}
}
// 关闭抽屉
const onClose = () => {
	formRef.value.resetFields()
	formData.value = {}
	visible.value = false
}
const filterOption = (input, option) => {
	return option.appName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const filterOptionPersion = (input, option) => {
	return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};


// 验证并提交数据
const onSubmit = () => {
	formRef.value.validate().then(() => {
		submitLoading.value = true
		const formDataParam = cloneDeep(formData.value)
		// if (formDataParam.id) {
		// 	const { appId } = formDataParam
		// 	formDataParam.appId = appId.join()
		// }

		sysAppruleApi
			.submit(formDataParam, !formDataParam.id)
			.then(() => {
				onClose()
				emit('successful')
			})
			.finally(() => {
				submitLoading.value = false
			})
	})
}
// 抛出函数
defineExpose({
	onOpen
})
</script>
